<template>
  <div class="online-service-page">
    <div class="service-header">
      <div class="service-icon">
        <img src="@/assets/images/user/Contact.png" alt="Customer Service" />
      </div>
      <h1>{{ t("user-online_serviceHeader") }}</h1>
    </div>

    <div class="service-options">
      <div class="service-item">
        <div class="service-item-icon">
          <img src="@/assets/images/user/iconSvip3.png" alt="WhatsApp" />
        </div>
        <div
          class="service-item-info"
          @click="opneLink(serviceContacts.lineUrl, 1)"
        >
          <div class="service-item-title">
            {{ t("user-messagedetail_waktu") }} {{ serviceContacts.lineDate }}
          </div>
          <div class="service-item-value">{{ t("user-online_ljzx") }}</div>
        </div>
      </div>

      <!-- <div class="service-item">
        <div class="service-item-icon">
          <img src="@/assets/images/user/iconSvip4.png" alt="Telegram" />
        </div>
        <div
          class="service-item-info"
          @click="opneLink(serviceContacts.telegramTeam, 2)"
        >
          <div class="service-item-title">
            {{ t("user-online_telegramChannel") }}
          </div>
          <div class="service-item-value">EstelarOlas</div>
        </div>
      </div>

      <div class="service-item">
        <div class="service-item-icon">
          <img src="@/assets/images/user/iconSvip5.png" alt="WhatsApp Group" />
        </div>
        <div
          class="service-item-info"
          @click="opneLink(serviceContacts.whatsApp, 3)"
        >
          <div class="service-item-title">
            {{ t("user-online_whatsappChannel") }}
          </div>
          <div class="service-item-value">EstelarOlas</div>
        </div>
      </div> -->
    </div>

    <div class="tips-section">
      <div class="tips-title">{{ t("withdrawal_tips") }}</div>
      <div class="tips-list">
        <div class="tip-item">
          {{ t("user-online_tip1") }}
        </div>
        <div class="tip-item">
          {{ t("user-online_tip2") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入所需的依赖
import { onMounted, ref } from "vue";
import { getaboutUs } from "@/api/user";
// 初始化数据
const serviceContacts = ref<{
  whatsApp?: String;
  telegramTeam?: any;
  whatsAppTeam?: string;
  lineDate?: string;
  lineUrl?: string;
}>({});
const { t } = useI18n();
// 生命周期钩子
onMounted(() => {
  // 页面加载完成后的逻辑

  getaboutUs()
    .then((res) => {
      serviceContacts.value = res.data;
    })
    .catch((err) => {});
});

const opneLink = function (data, type) {
  if (type == 1) {
    window.open(data);
  } else if (type == 2) {
    window.open(serviceContacts.value.telegramTeam);
  } else {
    window.open(serviceContacts.value.whatsAppTeam);
  }
};
</script>

<style lang="less" scoped>
.online-service-page {
  min-height: 100vh;
  padding: 20px;
  background: url("@/assets/images/user/Topbg.png") no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
}

.service-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;

  .service-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  h1 {
    font-size: 18px;
    color: #f6e0ca;
    font-weight: normal;
  }
}

.service-options {
  background-color: rgba(30, 27, 26, 0.5);
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.service-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  &:last-child {
    border-bottom: none;
  }

  .service-item-icon {
    width: 35px;
    height: 35px;
    background-color: #302927;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;

    img {
      width: 20px;
      height: 20px;
    }
  }

  .service-item-info {
    flex: 1;
  }

  .service-item-title {
    font-size: 14px;
    color: #9b9b9b;
    margin-bottom: 5px;
  }

  .service-item-value {
    font-size: 15px;
    color: #f6e0ca;
  }
}

.tips-section {
  background: url("@/assets/images/user/tipBg.png") no-repeat;
  background-size: 100% 100%;
  opacity: 0.5;
  border-radius: 10px;
  padding: 15px;
  position: relative;
  overflow: hidden;

  .tips-list {
    padding: 2px;
  }

  .tips-title {
    font-size: 16px;
    color: #f6e0ca;
    margin-bottom: 10px;
    font-weight: bold;
  }

  .tip-item {
    font-size: 14px;
    color: rgba(246, 224, 202, 0.8);
    margin-bottom: 8px;
    line-height: 1.4;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
